Membuat database mengunakan firestore database 
Dimana semua chat kita akan ditampung database 
Buka documentasinya 
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^ Step 2: Configure 

Storag project directory, run the following command to start the app configuration your apps to use 
Firebase 
ML Step 3: Initialize 
e D i 
Wet Hosting flutterfire configure +, Recommendations 
Flutter Joud Functions Cloud Firestore Data 
» Add Fireba ne model 
Ad urit: lis flutterfire configure workflow do? 

App Che 
Extension. 

v = al running of flutterfire configure, you need to re-run the command any time that you: 

* Start supporting a new platform in your Flutter app. 
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Karena chating seharusnya buka data secara real time 
Buka 
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Check out what's new from Firebase at Google I/O 2022. Learn more 


How does it work? 
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Use our flexible, scalable NoSQL cloud database to store and sync data for client- and server-side Perform simple and 
compound queries 
in Cloud Firestore 


development 
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x : data at global scale 
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Karena sebelumnya sudah membuka 
Kalau realtime mengunkan stream builder 
Yaitudatanya di pantau dgn stream builder 


Ketika datanya ada perubahan disitu dia menrefresh tampilannya 
Sebelum itu kita aktifkan firestore datbase nya 
Create databse 
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@ console firebase.google.com/u/2/project/chatt 
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Create database 


@ secure rules for Cloud Firestore 2 Set Cloud Firestore location 


you will need to write rules to secure your data 


Learn more 


(8) start in production mode 


CO Start in test mode allow read, write: if false; 


@ All third party reads and writes will be denied 
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Create database 
@ Secure rules for Cloud Firestore Q set Cloud Firestore location 


northamerica-northeast1 
us-west3 
us-west4 

Also, this location setting will be the location for your 
asia-southeast2 
asia-southeast1 

Learn more 

europe-central2 
us-west1 
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Lalu enable 
Tunggu sampai sleesai 


Seblumnya sudah pernah mencoba 

Disini mengunkan stream builder untuk secara real time 
Mengunakan snapsoot 

Ini sudah ada tampilan firesotre disi kita buat collection atau table 
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Buat namanya chat 
Yaitu tabel chat 
Document id buat auto 
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@ Give the collection an 1D 2 Add its first document 
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Karena akan membuat collection lagi 

Didalam chat 
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fà Project Overview Cloud Firestore e 
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Build 
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Authentication 
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B3 Storage 
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Didalam chat ada document ini misalkan kita chat dgn si a 
Jika kita tambhakn lagi maka chatan dgn si b 
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f& Project Overview 
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Didalamn chat buat collection lagi 
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@ Protect your Cloud Firestore resources from abuse, such as billing fraud or phishing Configure App Check X 
ft Project Overview 
Build 
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App Check = L" Fi B 
+ Start collection + Add document + Start collection 
Realtime Database 
chats > GoJ8bizBJwFKIBquTRIf > - Add field 
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Storage 
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Namanya masage 

Untuk menampung chatingan kita 
Disini lalu buat namanya text 
Contoh misalkan helo 
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@ Protect your rces from abuse as billing fraud or phishing Configure App Check X 
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Ada daftar chat 
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Misalkan kita chatan sama siapa saja 
Didlamnya maka ada chatanya 
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ft Project Overview e 
Build 
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+ Start collection + Add document + Start collection 
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Jika misalkan ada chtan lagi berati ada documena baru lagi 
Disini kita akan tampilan chatan kita 

Refrsh 

Menampilkan chatan kiya yg hello 

Buat dahulu 

Kita ke get started 
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Realtime Database v nen z Android Andr Flutter environment 
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1. If you havent already, configure and initialize Firebase in your Flutter app. Prototype and 
Cloud Firestore os test with Firebase 
Introduction 2. From the root of your Flutter project, run the following command to install the copy code sampi | a Emulator 
uite 
Get started Initialize Cloud 
initialize Clout 
» Understand Cloud Firestore o6 0 
flutter pub add cloud firestor 
* Add and manage data +, Recommendations 
* Read data Cloud Firestore Data 
* Secure and validate data 3. Once complete, rebuild your Flutter application: model 
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Perform simple and 
1 s, and pricing eae e 0 compound queries 
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Pertama kita harus menginstal firestore 
Kita instal di cmd 
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C D maindart X 


CHATTING APP 


plugin registrant dart 
main() 
surelnitialized(); 
.initializeApp 
options: ntPlatform, 


runApp 


TERMINAL 


OUTUNE 
TIMELINE 
DEPENDENCIES 


Flutter: 3.0.0 
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Setelah instal seharusnya kita harus pakai 

Flutter clean agar tidak eror 

Karena kita instal package sebelu aplikasi dijalankan 
Setealah clean maka flutter pub get 
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tignore 
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Deleting .dart tool.. 
Deleting .packages 

Generated. xcconfig.. . 

flutter export environment.sh. 
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Matikan dahulu 

Lalu run lagi 

Lihat insstalasi seperti ini 
li kita copy firestore nya 
Langsung ke read data yg real time 
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=F Create a new collection and a document using the following example code. On this page 
Create a Cloud 
Web version 9 ava : Firestore 
ift Obje More + database 
Authentication v 'odular ( paced Androic A 
eup let up your 
Cc D 
Realtime Database v // Create a new user with a first and last name 
use (Optional) 
rat Prototype and 
Cloud Firestore ^ - test with Firebase 
Introduction E g 
Get startec } lecommendations 
d +, R dati 
Cloud Firestore Data 
Add a new document with a generated ID model 
db on( "use ).add(user).then((DocumentReference doc) 
rint( immentSnapshot added with I loc.id)')) Perform simple and 
firestore.dart ©) compound queries 
Listen for realtime updates in Cloud Firestore 
Perform simplédnd compound ege 
queries Now add another document to the users collection. Notice that this document includes a key- aran Firestore 
Order and limit dat p ore and sync app 
Order and limit d value pair (middle name) that does not appear in the first document. Documents in a collection can data at global scale 
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Dan di chat screeen ini kita akan mengkin disini kita buat database nya disini 
Kita paste buat databse nya disni 
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ChatScre extends t 
ChatScreen((Key? key)) : super(key: key); 
final db = FirebaseFirestore.instance; 


(override On this page 
build C t context 


.builder 
15, oD 


itemBuilder: (context, index) 


+, Recommendations 


Cloud Firestore Data 


TERMINAL model 


gitign 
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Perform simple and 
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Lalu import cloud firerstore kemudian kita membuat stream untuk listview 
List view ini kita bungkus stream builder 

Klik kanan refactor builder 

Kasih stream builder 

Membutuhkan context dan snapshot 
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Im dart tool import 
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i({Key? 322 : s r(key: key); 
Firebas instance; 
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t build( 
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plugin registrant dart 


body: reamBuilder 
stream: , 
builder: (context, snapshot) ( 
ret Li iew.builder( 
itemCount: 15, 
itemBuilder context, index 
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r ephemeral 
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Kemudian tambahkan stream kita buat disni 
Buka documentasinya 


